import {Component} from '@angular/core';
import {animate, state, style, transition, trigger} from "@angular/animations";
import {Subscription} from "rxjs";
import {SideNavService} from "../../service/side-nav.service";
import {ProductService} from "../../service/product.service";

@Component({
    selector: 'app-manager-product',
    templateUrl: './manager-product.component.html',
    styleUrls: ["../../../assets/css/manager/bootstrap.css",
        "../../../assets/css/manager/font-awesome.css",
        "../../../assets/css/manager/morris-0.4.3.min.css",
        "../../../assets/css/manager/custom-styles.css",
        "../../../assets/css/manager/google.css",
        "../../../assets/css/manager/product.css"
    ],
    animations: [
        trigger('openClose', [
            // ...
            state('open', style({
                marginLeft: '260px',
            })),
            state('closed', style({
                marginLeft: '0px',
            })),
            transition('open => closed', [
                animate('0.3s ease-in-out')
            ]),
            transition('closed => open', [
                animate('0.3s ease-in-out')
            ]),
        ]),
        trigger('openCloseForProduct', [
            // ...
            state('open', style({
                right: '-320px',
                height: '170px',
            })),
            state('closed', style({
                right: '-1020px',
                height: '0px',
            })),
            transition('open => closed', [
                animate('0.3s ease-in-out')
            ]),
            transition('closed => open', [
                animate('0.3s ease-in-out')
            ]),
        ]),
        trigger('openCloseForItem', [
            // ...
            state('closed', style({
                right: '-320px',
                height: '170px',
            })),
            state('open', style({
                right: '0px',
                height: '260px',
            })),
            transition('open => closed', [
                animate('0.3s ease-in-out')
            ]),
            transition('closed => open', [
                animate('0.3s ease-in-out')
            ]),
        ]),
    ],
})
export class ManagerProductComponent {
    // 选择的分类
    selectedOption: string = "";
    // 分类数据
    categoryVO: any;
    // 商品数据
    productVO: any;
    // 物品数据
    itemVO: any;
    // 分类图标
    categoryImg: string = "";
    // 各表单加载动画开关
    categoryLoad: boolean = false;
    productLoad: boolean = false;
    itemLoad: boolean = false;
    // 选择的商品
    selectProducts: string[] = [];
    // 选择的物品
    selectItems: string[] = [""];
    // 侧边导航栏开关
    isSideNavClosed = false;
    // 正在编辑的商品
    editingProduct: string = "";
    // 是否正在编辑
    editing: boolean = false;
    // 正在编辑的信息
    editingProductId: string | undefined;
    editingCategoryId: string | undefined;
    editingName: string | undefined;
    editingDescription: string | undefined;
    // 显示商品侧边栏
    productShow: boolean = false;
    // 显示物品侧边栏
    itemShow: boolean = false;

    private subscription: Subscription;
    // 添加商品弹窗
    isAddItemDialogVisible: boolean = false;

    constructor(private sideNavService: SideNavService,
                private productService: ProductService) {
        this.subscription = this.sideNavService.isSideNavClosed$.subscribe(isClosed => {
            this.isSideNavClosed = isClosed;
        });
    }

    getCategory(categoryId: string) {
        this.categoryLoad = true;
        this.selectedOption = categoryId;
        this.categoryImg = `url(assets/images/${this.selectedOption.toLowerCase()}_icon.gif)`;
        this.productService.getCategoryVO(categoryId).subscribe(category => {
            this.categoryVO = category?.data;
            this.categoryLoad = false;
        });
    }

    getProduct(event: MouseEvent, productId: string) {
        event.stopPropagation();
        this.productShow = true;
        this.productLoad = true;
        this.selectProducts = [productId];
        this.productService.getProductVO(productId).subscribe(product => {
            this.productVO = product?.data;
            this.productLoad = false;
        });
    }

    getItem(itemId: string) {
        this.itemLoad = true;
        this.itemShow = true;
        this.selectItems = [itemId];
        this.productService.getItemVO(itemId).subscribe(item => {
            this.itemVO = item?.data;
            this.itemLoad = false;
        });
    }

    getDescription(str: string) {
        let index = str.indexOf('>');
        if (index !== -1) {
            // 截取 ">" 后面的文本
            return str.substring(index + 1);
        } else {
            return str;
        }
    }

    toggleSelect(productId: string) {
        if (!this.selectProducts.includes(productId)) {
            this.selectProducts.push(productId);
        } else {
            this.selectProducts = this.selectProducts.filter(product => product !== productId);
        }
        console.log(this.selectProducts);
    }

    toggleSelectALL() {
        if (this.selectProducts.length === this.categoryVO?.productList.length) {
            this.selectProducts = [];
        } else {
            for (const product of this.categoryVO?.productList) {
                if (!this.selectProducts.includes(product?.productId)) {
                    this.selectProducts.push(product?.productId);
                }
            }
        }
    }

    isChecked(productId: string) {
        return this.selectProducts.includes(productId);
    }

    isCheckedItem(itemId: string) {
        return this.selectItems.includes(itemId);
    }

    isEditable() {
        // 判断操作按钮可用性
        return this.selectProducts.length === 1;
    }

    isDeletable() {
        // 判断操作按钮可用性
        return this.selectProducts.length >= 1;
    }

    editRow() {
        this.editingProduct = this.selectProducts[0];
        this.editing = true;
        console.log(this.editingProduct);
    }

    dropRow() {
        let deleteProductId= this.selectProducts[0];
        this.productService.deleteProduct(deleteProductId).subscribe(response => {
            if (response?.code == 200) {
                this.getCategory(this.categoryVO?.productList[0]?.categoryId);
                console.log("好");
                this.selectProducts = [];
            }
        });
    }

    addItem() {
        this.isAddItemDialogVisible = true;
    }

    saveRow() {
        let row = document.getElementById("editing");
        let inputs = row?.querySelectorAll('input[type="text"]');
        // 保存编辑
        // @ts-ignore
        this.editingProductId = inputs[0].value;
        // @ts-ignore
        this.editingCategoryId = inputs[1].value;
        // @ts-ignore
        this.editingName = inputs[2].value;
        // @ts-ignore
        this.editingDescription = inputs[3].value;
        if (!this.editingProduct || !this.editingCategoryId || !this.editingName || !this.editingDescription) {
            // 输入为空
            alert("输入不能为空");
        } else {
            // 上传修改信息
            this.productService.updateCategory(this.editingProductId, this.editingCategoryId, this.editingName, this.editingDescription)
                .subscribe(response => {
                    if (response?.code == 200) {
                        this.getCategory(this.categoryVO?.productList[0]?.categoryId);
                        console.log("好");
                    }
                });
            this.editing = false;
            this.editingProduct = "";
        }
    }

    cancelRow() {
        this.editing = false;
        this.editingProduct = "";
    }

    clickPageWrapper() {
        if (this.productShow) {
            this.productShow = false;
            this.itemShow = false;
        }
    }

    onConfirm(event: any) {
        this.isAddItemDialogVisible = false;
        console.log(event);
    }

    onCancel() {
        this.isAddItemDialogVisible = false;
    }
}
